<template>
  <div>
    <!-- 面包屑 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb> -->
    <MBX
      level="商品管理"
      level2="商品分类"
    ></MBX>
    <br>
    <!-- 面包屑 -->
    <!-- 卡片 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button
            type="primary"
            @click="AddFenLei"
          >添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
        :data="catelist"
        border
        row-key="cat_id"
      >
        <el-table-column
          type="index"
          label="#"
        >
          <template slot-scope="scope">
            <div>
              {{scope.row.index}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="cat_name"
          label="商品分类"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="cat_deleted"
          label="是否有效"
        >
          <template slot-scope="scope">
            <div>
              <i
                v-if="scope.row.cat_deleted==true"
                class="el-icon-success"
              ></i>
              <i
                v-else
                class="el-icon-error"
              ></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="cat_level"
          label="排序"
        >
          <template slot-scope="scope">
            <div>
              <el-tag :type="types[scope.row.cat_level]"> {{scope.row.cat_level|fenlei}}</el-tag>

            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="EditFenLei(scope.row)"
              >编辑</el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="DDDel(scope.row.cat_id)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pagenum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 分页 -->
    </el-card>
    <!-- 卡片 -->
    <!-- 添加分类模态框 -->
    <el-dialog
      title="添加分类"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        :model="FenLeiForm"
        ref="FeiLeiFormRef"
        :rules="rules"
      >
        <el-form-item
          label="分类名称"
          prop="cat_name"
        >
          <el-input v-model="FenLeiForm.cat_name"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="父级分类">
          {{FenLeiId}}
          <!-- model绑定的是选中分类的id -->
          <!-- props里的是分类数据 -->
          <el-cascader
            v-model="FenLeiId"
            :options="FenLeiList"
            :props="PropsList"
            ref="LianJiRef"
            @change="XuanZ"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="FenLeiAddOk"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加分类模态框 -->
    <!-- 编辑分类模态框 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <el-form :model="DditForm">
        <el-form-item label="分类名称">
          <el-input v-model="DditForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="OkEdit"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑分类模态框 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: {
        pagesize: 2,
        pagenum: 1
      },
      catelist: [],
      cat_id: 0,
      total: 0,
      types: {
        0: "primary",
        1: "success",
        2: "info"
      },
      dialogVisible: false,
      dialogVisible1: false,
      FenLeiForm: {
        cat_pid: 0,
        cat_name: "",
        cat_level: 0
      },
      rules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" }
        ]
      },
      PropsList: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id",
        children: "children",
        checkStrictly: true
      },
      FenLeiId: [],
      FenLeiList: [],
      DditForm: {
        cat_name: "",
        id: 0
      }
    };
  },
  mounted() {
    this.xr();
  },
  methods: {
    // 渲染
    async xr() {
      let res = await this.$API.GoodsFenLei(this.page);
      console.log("商品分类页面数据", res);
      this.catelist = res.result;
      this.total = res.total;
      this.cat_id = res.cat_id;
      this.catelist.forEach((item, index) => {
        item.index = index + 1;
      });
    },
    // 删除
    async DDDel(row) {
      console.log(row);
      let res = await this.$API.OrdersDel(row);
      console.log("删除", res);
      this.xr();
    },
    handleSizeChange(v) {
      this.page.pagesize = v;
      this.xr();
    },
    handleCurrentChange(v) {
      this.page.pagenum = v;
      this.xr();
    },
    // 添加分类-打开模态框-渲染联级选择器
    async AddFenLei() {
      this.dialogVisible = true;
      let res = await this.$API.GoodsFenLei({ type: 2 });
      this.FenLeiList = res;
      console.log("分类数据", res);
    },
    // 选中节点
    XuanZ() {
      console.log("DOM节点", this.$refs.LianJiRef);
      this.$refs.LianJiRef.dropDownVisible = false;
      console.log("最后一个", this.FenLId);
    },
    async FenLeiAddOk() {
      // 如果存选中id的数组中的长度大于零
      if (this.FenLeiId.length > 0) {
        // 就把存id的数组中最后一个id存到表单对象里
        // 父级id
        this.FenLeiForm.cat_pid = this.FenLId;
        // 当前添加的这个属于几级分类
        this.FenLeiForm.cat_level = this.FenLeiId.length;
      } else {
        // 否则的话就是添加一级分类
        this.FenLeiForm.cat_pid = 0;
        this.FenLeiForm.cat_level = 0;
      }
      console.log("父级id", this.FenLId);
      console.log("几级分类", this.FenLeiId.length);
      let res = await this.$API.AddFenLei(this.FenLeiForm);
      console.log("提交结果", res);
      this.dialogVisible = false;
      this.xr();
    },
    // 编辑分类
    EditFenLei(row) {
      console.log("点击编辑回填", row);
      this.dialogVisible1 = true;
      this.DditForm.cat_name = row.cat_name;
      this.DditForm.id = row.cat_id;
    },
    // 提交编辑
    async OkEdit() {
      let res = await this.$API.FenLeiEdit(this.DditForm);
      console.log("确认编辑", res);
      this.xr();
      this.dialogVisible1 = false;
    }
  },
  computed: {
    FenLId() {
      return this.FenLeiId[this.FenLeiId.length - 1];
    }
  }
};
</script>

<style>
.el-cascader {
  width: 100%;
}
.el-radio {
  position: absolute;
  width: 80%;
  height: 25px;
  /* border: 1px solid; */
}
.el-radio__input {
  display: none;
}
</style>

